<template>
  <el-dialog
    v-el-drag-dialog
    title="出库瓶号"
    :visible.sync="visible"
    width="500px"
    append-to-body
    @close="reset"
  >
    <div style="width: 100%;">
      <div class="detail-item">瓶型：{{ bottleShow }}</div>
      <div class="detail-item">应扫瓶数：{{ needScanNum }}瓶</div>
      <el-table :data="tableData" max-height="400" style="width: 100%;">
        <el-table-column type="index" width="50" />
        <el-table-column prop="num" label="气瓶编码" width="200">
          <template slot-scope="scope">
            <div>
              <el-input v-if="scope.row.isEdit" v-model.trim="scope.row.bottleCode" />
              <span v-else>{{ scope.row.bottleCode }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <span :class="scope.row.isUpdate ? 'link' : 'disabled'" @click="editChange(scope.row, scope.$index)"> {{ scope.row.isEdit ? '保存' : '编辑' }}</span>
              <span v-if="scope.row.transId > 0" class="link" @click="showRecord(scope.row)">历史修改记录</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <div class="footer-sum">
        <div>实际扫瓶数：{{ realScanNum }}瓶</div>
      </div>
    </span>
    <editRecords ref="editRecords" />
  </el-dialog>
</template>

<script>
  import { queryBottleNum, editBottleNum } from '@/api'
  import editRecords from './editRecords.vue'
  export default {
    name: 'realseBottle',
    components: { editRecords },
    props: {

    },
    data() {
      return {
        visible: false,
        bottleShow: '',
        needScanNum: 0,
        realScanNum: 0,
        tableData: []
      }
    },
    methods: {
      async open(temp) {
        return new Promise(async(resolve) => {
          this.visible = true
          if (temp) {
            this.invenBillCode = temp
            this.getData()
          }
        })
      },
      async getData() {
        const params = {
          invenBillCode: this.invenBillCode,
          type: 3
        }
        const res = await queryBottleNum(params)
        this.tableData = res.data.bottleCode
        this.tableData.forEach((item, index) => {
          this.$set(this.tableData[index], 'isEdit', false)
        })
        this.bottleShow = res.data.bottleShow
        this.needScanNum = res.data.needScanNum
        this.realScanNum = res.data.realScanNum
      },
      editChange(row, index) {
        if (row.isUpdate) {
          this.tableData[index].isEdit = !this.tableData[index].isEdit
        }
        if (!row.isEdit && row.isUpdate) {
          this.save(row, index)
        }
      },
      showRecord(row) {
        this.$refs.editRecords.open(row.id)
      },
      save(row, index) {
        console.log(row)
        if (row.bottleCode) {
          const codeLists = this.tableData.map((item) => item.bottleCode)
          let has = false
          codeLists.forEach((item, index2) => {
            if (index !== index2) {
              if (item.bottleCode === row.bottleCode) {
                has = true
                this.$message.warning('气瓶编码已存在')
              }
            }
          })
          if (!has) {
            editBottleNum({ ...row }).then(res => {
              if (res.status === 200) {
                this.$message.success('保存成功')
                this.getData()
              }
            })
          }
        } else {
          this.$message.warning('气瓶编码不能为空')
        }
      },
      reset() {
        this.num = ''
        this.tableData = []
      }
    }
  }
</script>

<style lang="scss" scoped>
  .detail-item {
    margin-bottom: 10px;
  }
  .footer-sum {
    display: flex;
    justify-content: flex-end;
  }
  .link {
    margin-right: 10px;
    color: $themeColor;
    cursor: pointer;
  }
  .disabled {
    color: rgb(144, 147, 153);
    cursor: not-allowed;
  }
</style>
